<template>
	<div class="judge-con">
		<div class="nav-bar">
			<button type="button" class="tab is-active">5521/A001</button>
			<button type="button" class="tab is-active" onclick="location.replace('/exit')">提 交</button>
		</div>
		<div class="btn-con">
			<div class="number" style="background-color: #4953e9;">A0012</div>
			<div class="name" style="background-color: #4953e9;">外发光的效果</div>
			<div class="r-con">
				<div class="point-text" v-bind:class="{'isActive':!setActive}" @click="setExpressiveness">
					<input type="number" id="expressiveness" name="expressiveness" class="point-num" min="0" max="6" value="6.0">
				</div>
			</div>
			<div class="number" style="background-color: #4953e9;">A0012</div>
			<div class="name" style="background-color: #4953e9;">-0.1</div>
			<div class="r-con">
				<div class="point-text" v-bind:class="{'isActive':!setActive}" @click="setExpressiveness">
					<input type="number" id="expressiveness" name="expressiveness" class="point-num" min="0" max="6" value="6.0">
				</div>
			</div>
			<div class="number" style="background-color: #4953e9;">A0012</div>
			<div class="name" style="background-color: #4953e9;">-0.1</div>
			<div class="r-con">
				<div class="point-text" v-bind:class="{'isActive':!setActive}" @click="setExpressiveness">
					<input type="number" id="expressiveness" name="expressiveness" class="point-num" min="0" max="6" value="6.0">
				</div>
			</div>
			<div class="number" style="background-color: #4953e9;">A0012</div>
			<div class="name" style="background-color: #4953e9;">-0.1</div>
			<div class="r-con">
				<div class="point-text" v-bind:class="{'isActive':!setActive}" @click="setExpressiveness">
					<input type="number" id="expressiveness" name="expressiveness" class="point-num" min="0" max="6" value="6.0">
				</div>
			</div>
		</div>
		<!-- <div class="btn-bar-b">
			<button type="button" class="btn btn-reload">获取场次</button>
			<button type="button" class="btn btn-submit">提交评分</button>
		</div> -->
	</div>
</template>
<script>
import { getMultiLockMatch } from '@/api/matchSchedule'
import { saveMatchScore } from '@/api/matchScore'
export default {
  data() {
    return {
      name: null,
      setActive: true
    }
  },
  created() {
    this.getMultiLockMatch()
  },
  methods: {
    getMultiLockMatch() {
      var obj = {
        matchId: this.$store.state.user.matchReferee.matchId,
        matchAdminId: this.$store.state.user.matchReferee.matchAdminId
      }
      getMultiLockMatch(obj).then(res => {
        console.log(res)
      })
    },
    submitScore() {
      var obj = {
        matchScheduleId: 92,
        referee: 92,
        expressiveness: 4,
        accuracy: 6,
        winner: 0
      }
      saveMatchScore(obj).then(res => {
        console.log(res)
      })
    },
    setAccuracy() {
      this.setActive = true
    },
    setExpressiveness() {
      this.setActive = false
    }
  }
}
</script>
<style scoped>
.judge-con {
            /*max-width: 750px;*/
            margin: 0 auto;
            height: 100%;
            /*background-color: #fff;*/
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            /*    -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;*/
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }

        .nav-bar {
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

        .nav-bar .tab {
            -webkit-box-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            align-items: center;
            height: 40px;
            width: 33%;
            font-size: 16px;
            margin-bottom: 0;
            border-radius: 0;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
            background: #f2f5f6; /* Old browsers */
            background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc', GradientType=0); /* IE6-9 */
            color: #333;
        }

        .nav-bar .tab.is-active {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+13,0a0a0a+42,4e4e4e+93,4e4e4e+93 */
            background: #959595; /* Old browsers */
            background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 13%, #0a0a0a 42%, #4e4e4e 93%, #4e4e4e 93%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #959595 0%, #0d0d0d 13%, #0a0a0a 42%, #4e4e4e 93%, #4e4e4e 93%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #959595 0%, #0d0d0d 13%, #0a0a0a 42%, #4e4e4e 93%, #4e4e4e 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#959595', endColorstr='#4e4e4e', GradientType=0); /* IE6-9 */
            color: #fff;
            font-weight: bold;
        }

        .judge-title {
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            /*height: 40px;*/
            padding: 20px;
            font-size: 20px;
            color: #fff;
        }

        .win-info {
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            align-items: center;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#38419e+0,7795ff+50,ed717c+51,931f26+100 */
            background: #38419e; /* Old browsers */
            background: -moz-linear-gradient(left, #38419e 0%, #7795ff 50%, #ed717c 51%, #931f26 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #38419e 0%, #7795ff 50%, #ed717c 51%, #931f26 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #38419e 0%, #7795ff 50%, #ed717c 51%, #931f26 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#38419e', endColorstr='#931f26', GradientType=1); /* IE6-9 */
            padding: 20px;
            /*font-size: 20px;*/
        }

        .win-info .text {
            flex: 0 0 auto;
            font-size: 20px;
            padding: 10px 30px;
            background-color: #000;
            color: #ff0000;
            font-weight: bold;
        }

        .point-con {
            margin-top: 10px;
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            width: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
        }

        .point-con .l-con, .point-con .r-con {
            -webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            box-shadow: 0 0px 10px 5px rgba(0, 0, 0, 0.3) inset;
            border-radius: 10px;
            width: 48%;
        }

        .l-con {
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#38419e+0,7795ff+50,ed717c+51,931f26+100 */
            background: #38419e; /* Old browsers */
            background: -moz-linear-gradient(left, #38419e 0%, #7795ff 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #38419e 0%, #7795ff 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #38419e 0%, #7795ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#38419e', endColorstr='#7795ff', GradientType=1); /* IE6-9 */
        }

        .r-con {
            /* margin-left: 10px; */
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#38419e+0,7795ff+50,ed717c+51,931f26+100 */
            background: #931f26; /* Old browsers */
            background: -moz-linear-gradient(left, #ed717c 0%, #931f26 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(left, #ed717c 0%, #931f26 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to right, #ed717c 0%, #931f26 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed717c', endColorstr='#931f26', GradientType=1); /* IE6-9 */
        }

        .point-text {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
        }
				.point-text.isActive{
					    border: 2px solid #FC0;
    border-radius: 6px;
    box-shadow: 0 0 8px #FC0;
    -moz-box-shadow: 0 0 8px #FC0;
    -webkit-box-shadow: 0 0 6px #FC0;
				}
        .point-title {
            flex: 0 0 auto;
            height: 40px;
            position: relative;
        }

        .point-title .text {
            position: absolute;
            height: 100%;
            left: 10px;
            right: 10px;
            top: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 22px;
            text-align: center;
            /*font-weight: bold;*/
        }

        .point-num {
            -webkit-box-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            text-align: center;
            font-size: 30px;
            line-height: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            font-weight: bold;
            background: none;
            border: 0;
            color: inherit;
            padding: 0;
            width: 100%;
        }

        .l-con .point-text {
            color: #fff;
        }

        .r-con .point-text {
            color: yellow;
						height:100%;
						width:100%;
        }

        .btn-con {
            -webkit-box-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-wrap: wrap;
            -moz-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            -o-flex-wrap: wrap;
            flex-wrap:wrap;
            margin-top: 20px;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-around;
            -ms-flex-pack: justify;
            justify-content: space-around;
        }
				.btn-con .number{
					-webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            /*border: 1px solid lightblue;*/
            /*background: lavender;*/
            width: 25%;
            font-size: 30px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            border-radius: 5px;
            color: #fff;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin-bottom: 20px;
				}
				.btn-con .name{
					-webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            /*border: 1px solid lightblue;*/
            /*background: lavender;*/
            width: 40%;
            font-size: 30px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            border-radius: 5px;
            color: #fff;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin-bottom: 20px;
				}
				.btn-con .r-con{
					-webkit-box-flex: 0 1 auto;
            -webkit-flex: 0 1 auto;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            /*border: 1px solid lightblue;*/
            /*background: lavender;*/
            width: 30%;
            font-size: 30px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            border-radius: 5px;
            color: #fff;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin-bottom: 20px;
				}
        .btn-con .btn:active {
            filter:brightness(1.5);
            -webkit-filter: brightness(1.5);
        }

        .btn-bar-b {
            flex: 0 0 auto;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
        }

        .btn-bar-b .btn-reload, .btn-bar-b .btn-submit {
            -webkit-box-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            width: 50%;
            height: 50px;
            font-size: 18px;
            margin-bottom: 0;
            border-radius: 0;
            /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
            background: #f2f5f6; /* Old browsers */
            background: -moz-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(top, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(to bottom, #f2f5f6 0%, #e3eaed 37%, #c8d7dc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f5f6', endColorstr='#c8d7dc', GradientType=0); /* IE6-9 */
            color: #333;
        }

        .btn-submit {
            border-left: 1px solid darkgray;
        }
</style>

